<script setup>
import {reactive, ref} from 'vue';
import {Message} from '@element-plus/icons-vue';
/* data  */
const searchForm = reactive({
  title: "",
  category: "",
})
const categoryOptions = reactive([
  {
    value: 1,
    label: "黄金糕"
  },
  {
    value: 2,
    label: "双皮奶"
  },
  {
    value: 3,
    label: "龙须面"
  },
  {
    value: 4,
    label: "烤鸭"
  }
])
const tableData = ref([
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    status:1,
  },
  {
    date: '2016-05-02',
    name: 'yuan',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 190, Grove St, Los Angeles',
    zip: 'CA 90036',
    status:2,
  },
  {
    date: '2016-05-03',
    name: 'alex',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 191, Grove St, Los Angeles',
    zip: 'CA 90036',
    status:1,
  },
  {
    date: '2016-05-04',
    name: 'alvin',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 192, Grove St, Los Angeles',
    zip: 'CA 90036',
    status:2,
  },
  {
    date: '2016-05-05',
    name: 'peiqi',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 193, Grove St, Los Angeles',
    zip: 'CA 90036',
    status:1,
  },
])
const dialogFormVisible=ref(false);
const dialogVisible=ref(false);

const searchFormRef = ref()

/* function  */
function clickSearch() {
  console.log(searchForm);
}
function resetSearchForm() {
  searchFormRef.value.resetFields();
}
function handleClick(row){
  dialogVisible.value = true;
  console.log(row);
}
function confirmDelete(row){
  console.log("confirm",row);
}
function handleCurrentChange(page){
  console.log("查看页数",page);
}
function clickAddDialog(){
  dialogFormVisible.value = true;
}

</script>

<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchFormRef">
        <el-form-item label="标题" prop="title">
          <el-input v-model="searchForm.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="类型" style="width: 200px" prop="category">
          <el-select v-model="searchForm.category">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="clickSearch">筛选</el-button>
          <el-button size="small" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px">
      <template #header>
        <div class="clearfix">
          <span style="font-size: 14px; display: inline-flex; align-items: center;"><el-icon
              style="margin-right: 5px; vertical-align: middle;"><Message/></el-icon>消息列表</span>
          <el-button type="primary" size="small" style="float: right" @click="clickAddDialog"><el-icon><CirclePlus/></el-icon>操作按钮</el-button>
        </div>
      </template>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag v-if="scope.row.status===1" type="success">成功</el-tag>
              <el-tag v-else type="danger">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-popconfirm title="确定要删除吗？" @confirm="confirmDelete(scope.row)">
                <template #reference>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <el-row justify="end" style="margin-top: 16px">
          <el-pagination background layout="prev, pager, next,jumper" :total="1000" @current-change="handleCurrentChange"/>
        </el-row>
      </div>

      <el-dialog  title="Shipping address" width="500" v-model="dialogFormVisible">
        <el-form >
          <el-form-item label="Promotion name" >
            <el-input autocomplete="off" />
          </el-form-item>
          <el-form-item label="Zones" >
            <el-select  placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
        <span>This is a message</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>



    </el-card>
  </div>
</template>

<style scoped>

</style>